<template>

  <div class="login_container" >

    <div class="login_box" :style="{width: divWidth, height: divHeight}">
      <!-- 头像区域-->
      <div class="avatar_box">
        <img src="../assets/3.jpeg" alt="VUE图片" />
      </div>

      <div class="login_form" >
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
          label-position="right">
          <!-- <td>选择注册身份
          <select >
            <option>1</option>

          </select>
          </td> -->

          <el-form-item label="身份选择" prop="status1" >
            <el-select v-model="ruleForm.status1" placeholder="请选择身份" >
              <el-option v-for="item in optionA4" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

            <el-form-item label="用户名" prop="username" >
            <el-input placeholder="请输入用户名" v-model="ruleForm.username"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input placeholder="请输入密码" type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="checkPass">
            <el-input placeholder="确保与第一次输入的密码相同" type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="手机号" prop="phone">
            <el-input placeholder="请输入手机号..." v-model="ruleForm.phone"></el-input>
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input placeholder="请输入邮箱..." v-model="ruleForm.email"></el-input>
          </el-form-item>

           <el-form-item label="选择省市区" prop="city" v-if="ruleForm.status1===0 || ruleForm.status1===1">
             <el-cascader size="large" :options="options" v-model="ruleForm.city" @change="handleChange" />
             </el-form-item>

          <el-form-item label="详细地址" prop="address" v-if="ruleForm.status1===0 || ruleForm.status1===1">
            <el-input placeholder="请输入详细地址" v-model="ruleForm.address"></el-input>
          </el-form-item>

          <el-form-item label="汽车品牌" prop="carbrand" v-if="ruleForm.status1=== 3">
            <el-input placeholder="请输入汽车品牌" v-model="ruleForm.carbrand"></el-input>
          </el-form-item>

          <el-form-item label="车牌号" prop="carcard" v-if="ruleForm.status1=== 3">
            <el-input placeholder="请输入车牌号" v-model="ruleForm.carcard"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="insertUser()">提交</el-button>
            <el-button type="primary" @click="fanhuilogin()">返回登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>

        </el-form>
      </div>
    </div>

  </div>

</template>

<script>
/*
import { defineComponent } from 'vue'
import { EluiChinaAreaDht } from 'elui-china-area-dht'
const chinaData = new EluiChinaAreaDht.ChinaArea().chinaAreaflat
 */

import { regionDataPlus, CodeToText } from 'element-china-area-data'

  export default {


    name: "register",
    data() {
      const checkPass = (rule, value, callback) => {
        if (this.ruleForm.password !== value) return callback(new Error('2次密码输入不一致'))
        //否则校验成功
        callback()
      }

      const checkPhone = (rule, value, callback) => {

        //定义校验手机号的正则语法
        const phoneRege = /^1[34578][0-9]{9}$/
        if (phoneRege.test(value)) {
          return callback()
        }
        callback(new Error('请填写正确的手机号'))
      }
      /* const status = (rule, value, callback) => {

         if (this.ruleForm.status == null ) return callback(new Error('请选择身份注册'))

      } */

      const vehicleNumber = (rule, value, callback) => {
        if (this.isVehicleNumber(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确车牌号，如(贵A88888)"));
        }
      }

      return {
        options: regionDataPlus, // 4.省市区带‘全部’三级联动选择
        selectedOptions: [],
        //用户身份选择

        //div大小
        divHeight:0,
        divWidth:0,

        //
        loc:'',//输出区域码所对应的属性值即中文地址

        optionA4: [{
            value: 0,
            label: '批发客户'
          },
          {
            value: 1,
            label: '零售闪客'
          },
          {
            value: 2,
            label: '汽配城客户'
          },
          {
            value: 3,
            label: '零售私家车'
          }
        ],


        ruleForm: {
          status1:null,
          username: "",
          password: "",
          checkPass: "",
          phone: "",
          email: "",
          city:"",
          city1:"",
          address:"",
          carbrand:"",
          carcard:""
        },

        rules: {
          status1:[
            { required: true,
             message: '请选择身份注册',
             trigger: 'change',
             }
          ],

          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 30,
              message: '长度在 3 到 30 个字符',
              trigger: 'blur'
            }
          ],
          checkPass: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 30,
              message: '长度在 3 到 30 个字符',
              trigger: 'blur'
            },
            {
              validator: checkPass,
              trigger: 'blur'
            }
          ],
          username: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 30,
              message: '长度在 3 到 30 个字符',
              trigger: 'blur'
            }
          ],
          address: [{
              required: true,
              message: '请输入详细地址',
              trigger: 'blur'
            }],
            city: [{
                required: true,
                message: '请选择区域',
                trigger: 'blur'
              }],
          phone: [{
              required: true,
              message: '请输入手机号',
              trigger: 'blur'
            },
            {
              validator: checkPhone,
              trigger: 'blur'
            }
          ],
          email: [{
              required: true,
              message: '请输入邮箱地址',
              trigger: 'blur'
            },
            {
              type: 'email',
              message: '请输入正确的邮箱地址',
              trigger: ['blur', 'change']
            }
          ],
          carcard: [
                    { required: true, message: "车牌号不能为空", trigger: "blur" },
                    {
                      validator: vehicleNumber,
                      trigger: "blur",
                    },
                  ],
           carbrand: [{
               required: true,
               message: '请输入汽车品牌',
               trigger: 'blur'
             }]
        }
      }
    },
    //生命周期函数给高度赋值
    created() {
      this.divWidth = 470 +"px"
      this.divHeight =520 +"px"
    },
    updated() {
      if(this.ruleForm.status1 == 0 || this.ruleForm.status1 == 1){
        this.divWidth = 470 +"px"
        this.divHeight =650 +"px"
      }else if(this.ruleForm.status1 == 2){
        this.divWidth = 470 +"px"
        this.divHeight =520 +"px"
      }else if(this.ruleForm.status1 == 3){
        this.divWidth = 470 +"px"
        this.divHeight =650 +"px"
      }
    },

    methods: {
       handleChange () {
            for (let i = 0; i < this.selectedOptions.length; i++) {
              this.loc += CodeToText[this.selectedOptions[i]]
            }
            console.log(this.loc)// 输出区域码所对应的属性值即中文地址

          },

      isVehicleNumber(vehicleNumber) {
        var xreg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
        var creg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
        if(vehicleNumber.length == 7){
          return creg.test(vehicleNumber);
        } else if(vehicleNumber.length == 8){
          return xreg.test(vehicleNumber);
        } else{
          return false;
        }
      },
      czgaokuan() {
        this.divWidth = 470 +"px"
        this.divHeight =520 +"px"
      },




      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.czgaokuan();
        this.$refs[formName].resetFields();
      },
      fanhuilogin() {
        this.$router.push("/login")
      },

      async insertUser() {
        //获取表单对象之后进行数据校验

        this.$refs.ruleForm.validate(async valid => {
          if (!valid) return
          //遍历获取省市区
          for (let i = 0; i < this.options.length; i++) {
            if(this.options[i].value === this.ruleForm.city[0]){
              this.ruleForm.city1 = this.options[i].label+"/"
              for(let i1 = 0; i1 < this.options[i].children.length; i1++){
                if (this.options[i].children[i1].value === this.ruleForm.city[1]) {
                  this.ruleForm.city1 += this.options[i].children[i1].label+"/"
                   for(let i2 = 0; i2 < this.options[i].children[i1].children.length; i2++){
                      if(this.options[i].children[i1].children[i2].value === this.ruleForm.city[2]){
                        this.ruleForm.city1 += this.options[i].children[i1].children[i2].label
                      }
                   }
                }
              }
            }
          }

           console.log(this.ruleForm)


          let {
            data: result
          } = await this.$http.post("/user/insertUser", this.ruleForm)
          if (result.status === 202) {
            this.$message.error("用户已存在！请修改用户名")
            this.ruleForm.username = ""
          }else if(result.status === 201){
            this.$message.error("注册失败")
          }else {
            this.$message.success("用户注册成功,请登录")
            this.$router.push("/login")
          }

        })

      },
    }
  }
</script>

<style lang="less" scoped>
  .login_container {
    background:url(../assets/img/10.jpg) no-repeat;
    background-size: cover;
    position: fixed;
    //background-color: #2b4b6b;
    height: 100%;
    width: 100%;

    /* background-image: url(../assets/bgimg.png) !important;
    height: 100%;
    color: #FFFDEF; */
  }

  .login_box {
   // width: 470px;
    //height: 660px;
    padding-right: 50px;
    opacity: 0.9;
    background: #C0C4CC;
    /* 设定圆弧角*/
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);


    .avatar_box {
      height: 130px;
      width: 130px;
      border: 1px solid #EEEEEE;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #DDDDDD;
      /* 添加阴影*/
      position: absolute;
      /* 绝对定位*/
      left: 50%;
      /* 距离左侧50%*/
      transform: translate(-50%, -50%);
      /*回调50%*/
      background-color: #FFFFFF;

      img {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background-color: #EEEEEE;
      }
    }


    .btns {
      display: flex;
      justify-content: flex-end;
    }

    .login_form {
      color: #FFFFFF;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }



  }
</style>
